//显示试题收藏
<template>
	<div class="table">
		<p class="title">试题收藏列表</p>
		<section class="content-el">
			<!-- <div id="searchdiv">
				<el-select v-model="value" placeholder="请选择">
					<el-option-group v-for="group in options" :key="group.label" :label="group.label">
						<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-option-group>
				</el-select>
			</div> -->
			<el-table ref="filterTable" :data="score" v-loading="loading">

				<el-table-column prop="topicName" label="试题名称" filter-placement="bottom-end">

				</el-table-column>
				<el-table-column label="试题类型">
					<template slot-scope="scope">
					  <el-tag v-if="scope.row.topicType=='1'">判断题</el-tag>
					  <el-tag v-if="scope.row.topicType=='2'">填空题</el-tag>
					  <el-tag v-if="scope.row.topicType=='3'">综合题</el-tag>
					  <el-tag v-if="scope.row.topicType=='4'">单选题</el-tag>
					  <el-tag v-if="scope.row.topicType=='5'">多选题</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="试题难度">
					<template slot-scope="scope">
					  <el-tag v-if="scope.row.topicLevel=='1'">简单</el-tag>
					  <el-tag v-if="scope.row.topicLevel=='2'">一般</el-tag>
					  <el-tag v-if="scope.row.topicLevel=='3'">困难</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="toTopicMsg(scope.row.topicId)" type="success" size="small">查看详情</el-button>
						<el-button @click="cancelColl(scope.row.topicId)" type="warning" size="small">取消收藏</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center" align="middle" class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
				 :page-sizes="[4,6,8,10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
			</el-row>
		</section>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagination: { //分页后的留言列表
					current: 1, //当前页
					total: null, //记录条数
					size: 10 //每页条数
				},
				loading: false, //加载标识符
				score: [], //收藏的试题（判断题）
				list:[],//收藏的试题（单选题）
				count:0,//数量
				filter: null, //过滤参数
				options: [{
					label: '试题类型',
					options: [{
						value: '1',
						label: '判断题'
					}, {
						value: '2',
						label: '填空题'
					}, {
						value: '3',
						label: '综合题'
					}]
				}, {
					label: '选择题类型',
					options: [{
						value: '1',
						label: '单选'
					}, {
						value: '2',
						label: '多选'
					}]
				}, {
					label: '试题难度',
					options: [{
						value: '1',
						label: '简单'
					}, {
						value: '2',
						label: '一般'
					}, {
						value: '3',
						label: '困难'
					}]
				}],
				value: ''
			}
		},
		created() {
			this.getScore()
			this.loading = true //数据加载则遮罩表格
		},
		methods: {
			getScore() {
				let studentId = this.$cookies.get("cid")

				this.$axios(`/api/coll/getcollbyid`, {
					params: {
						userid: studentId, //用户id
						page: this.pagination.current, //当前页码
						limit: this.pagination.size, //每页输出的条数
					}
				}).then(res => {

					//创建数组
					var array = new Array();
					//遍历
					for (let i = 0; i < res.data.records.length; i++) {
						array.push(res.data.records[i].answer.topicId);
					}

					if (res.data.code == 200) {
						//分页
						this.pagination = res.data
					}

					console.log(res.data)

					//调用方法
					this.getColl(array)

				})
			},
			//获取试题集
			async getColl(Array) {
				//获取判断题这些题
				this.$axios(`/api/coll/getcollinid`).then((res) => {

					//this.loading = false //数据加载完成去掉遮罩

					//试题呀
					this.score = res.data

				}).catch((err) => {
					console.log(err)
				})

				//获取单选题这些题
				this.$axios(`/api/coll/getcollinid2`).then((res) => {

					//循环
					for(let i=0;i<res.data.length;i++){
						//创建对象
						var xuanze = {};
						//循环赋值

						xuanze.topicId = res.data[i].chooseId//试题id
						xuanze.topicName = res.data[i].chooseName//试题名称
						xuanze.topicType = (res.data[i].chooseType+3)//试题类型
						xuanze.topicLevel = res.data[i].chooseLevel//试题难度
						//将整个对象添加到集合中
						this.score.push(xuanze)
						console.log(this.score)
					}

					this.loading = false //数据加载完成去掉遮罩

				}).catch((err) => {
					console.log(err)
				})

			},
			//取消收藏
			cancelColl(topicId){
				var collectionId = "";
				//学生编号
				let studentId = this.$cookies.get("cid")
				for(let i=0; i<this.pagination.records.length; i++){
					if(this.pagination.records[i].answer.topicId == topicId && this.pagination.records[i].user.userId == studentId){
            collectionId = this.pagination.records[i].collectionId
					}
				}
        console.log(collectionId)
				//获取判断题这些题
				this.$axios({
					url: `/api/coll/delcoll`,
					method: 'post',
					params: {
						collectionId:collectionId
					},
				}).then((res) => {

					//this.loading = false //数据加载完成去掉遮罩
					if(res.data.code ==200) {
					  this.$message({
					    message: '取消成功',
					    type: 'success'
					  })
					}
					//刷新
					this.getScore()

				}).catch((err) => {
					console.log(err)
				})
			},

			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val
				this.getScore()
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val
				this.getScore()
			},
			formatter(row, column) {
				return row.address;
			},
			filterTag(value, row) {
				return row.tag === value;
			},
			filterHandler(value, row, column) {
				const property = column["property"];
				return row[property] === value;
			},
			//跳转到试题详情页
			toTopicMsg(examCode) {
				this.$router.push({
					path: '/topicMsg',
					query: {
						examCode: examCode
					}
				})
				console.log(examCode)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pagination {
		padding-top: 20px;
	}

	.table {
		width: 980px;
		margin: 0 auto;

		.title {
			margin: 20px;
		}

		.content-el {
			background-color: #fff;
			padding: 20px;
		}
	}

	#searchdiv {
		margin-bottom: 5px;
		margin-left: 75%;
	}
</style>
